<template>

  <div>

    <!--查询-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="款项名称">
          <el-input placeholder="请输入款项名称" v-model.trim="searchBillParam.purpose" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="账单类型">
          <el-select v-model="searchBillParam.typeIdList" placeholder="请选择账单类型" :filterable="true" clearable multiple>
            <el-option
              v-for="item in billTypeIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始时间">
          <el-date-picker
            clearable
            v-model="searchBillParam.triggerTimeStart"
            placement="bottom-start"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间">
          <el-date-picker
            clearable
            v-model="searchBillParam.triggerTimeEnd"
            placement="bottom-start"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="大于金额">
          <el-input-number placeholder="请输入金额" v-model.trim="searchBillParam.priceStart" clearable size="mini"></el-input-number>
        </el-form-item>

        <el-form-item label="小于金额">
          <el-input-number placeholder="请输入金额" v-model.trim="searchBillParam.priceEnd" clearable size="mini"></el-input-number>
        </el-form-item>

        <el-form-item label="支出or收入">
          <el-select v-model.trim="searchBillParam.incomeOrExpenditure" placeholder="请选择类型" clearable>
            <el-option label="支出" :value="1"></el-option>
            <el-option label="收入" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否入账">
          <el-select v-model.trim="searchBillParam.entry" placeholder="请选择是否入账记录" clearable>
            <el-option label="不入账" :value="1"></el-option>
            <el-option label="入账" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="核心账单">
          <el-select v-model.trim="searchBillParam.core" placeholder="请选择核心关键账单" clearable>
            <el-option label="非核心" :value="1"></el-option>
            <el-option label="核心账单" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="支出方式">
          <el-select v-model.trim="searchBillParam.modeOfExpenditure" placeholder="请选择支出方式" clearable>
            <el-option label="线上" :value="1"></el-option>
            <el-option label="线下" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="使用人">
          <el-select v-model="searchBillParam.userIdList" placeholder="请选择使用人" multiple clearable>
            <el-option
              v-for="item in memberFamilyList"
              :key="item.id"
              :label="item.userName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="账单组">
          <el-select v-model="searchBillParam.groupId" placeholder="请选择账单组" clearable>
            <el-option
              v-for="item in billGroupList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" size="mini" @click="getBillPageListBefore">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQueryBill">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveBill">新增</el-button>
          <span style="margin-left: 20px;">收入: <span style="color: red">{{receipt}}</span> 元 | 支出: <span style="color: #67C23A">{{expense}}</span> 元</span>
        </el-form-item>

      </el-form>


    </el-card>

    <!--列表-->
    <el-card style="margin-top: 10px">

      <el-table
        :data="billTableData"
        :row-class-name="tableRowClassName"
        max-height="550px"
        height="550px"
        style="width: 100%">

        <el-table-column
          prop="purpose"
          label="款项名称"
        >
        </el-table-column>

        <el-table-column
          prop="price"
          label="金额"
        >
          <template slot-scope="scope">
            <span>
              <el-tag size="mini" v-if="scope.row.incomeOrExpenditure === 1">{{scope.row.price}}</el-tag>
              <el-tag type="danger" size="mini" v-else-if="scope.row.incomeOrExpenditure === 2">+ {{scope.row.price}}</el-tag>
            </span>
            元
          </template>
        </el-table-column>

        <el-table-column
          prop="triggerTime"
          label="款项发生时间"
        >
        </el-table-column>

        <el-table-column
          prop="typeName"
          label="账单类型名称"
        >
        </el-table-column>

        <el-table-column
          prop="groupName"
          label="组"
        >
        </el-table-column>

        <el-table-column
          prop="userNameList"
          label="使用人"
        >
          <template slot-scope="scope">
            <span>{{(scope.row.userNameList.join(", "))}}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="entry"
          label="是否入账"
        >
          <template slot-scope="scope">
            <span>
              <el-tag size="mini" v-if="scope.row.entry === 1">不入账</el-tag>
              <el-tag type="danger" size="mini" v-else-if="scope.row.entry === 2">入账</el-tag>
            </span>
          </template>
        </el-table-column>


        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <!--<el-button @click="toOpenBillGroupDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看账单</el-button>-->
            <el-button @click="openUpdBill(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button @click="delBillByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; margin-top:10px;"
        background
        layout="total, prev, pager, next, jumper"
        @current-change="billPageCurrentChange"
        :page-size="pageConfig.size"
        :current-page="pageConfig.current"
        :pager-count="5"
        :total="pageConfig.total">
      </el-pagination>

    </el-card>

    <BillSaveUpd ref="BillSaveUpdRef" @getBillPageList="getBillPageList"/>

  </div>

</template>

<script>

  import http from '@/utils/http'
  import BillSaveUpd from './BillSaveUpd'

  export default {
    name: "BillList",
    components:{
      BillSaveUpd
    },
    data(){
      return {
        // 查询参数
        searchBillParam: {
          purpose: null,
          typeId: null,
          groupId: null,
          triggerTimeStart: null,
          triggerTimeEnd: null,
          priceStart: null,
          priceEnd: 1000000,
          incomeOrExpenditure: null,
          entry: null,
          core: null,
          modeOfExpenditure: null,
          userIdList: null,
          typeIdList: null,
        },
        // 账单组
        billGroupList: [],
        // 支出
        expense: 0,
        // 收入
        receipt: 0,
        // 账单类型
        billTypeIdList: [],
        // 家庭成员
        memberFamilyList: [],
        // 表格数据
        billTableData: [],
        // 分页参数
        pageConfig: {
          // 每页记录数
          size: 50,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
      }
    },
    methods: {
      /**
       * 不分页查询全部的账单组
       */
      getBillingGroupList(){
        http.get("/bill/getBillingGroupList", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.billGroupList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开新增弹出框
       */
      openSaveBill(){
        this.$refs.BillSaveUpdRef.openBeforeBillPage('save', null)
      },
      /**
       * 打开修改弹出框
       */
      openUpdBill(obj){
        this.$refs.BillSaveUpdRef.openBeforeBillPage('upd', obj)
      },
      /**
       * 页面不同行使用不同的颜色
       * @param row 数据
       * @param rowIndex 索引
       * @return {string} 返回的样式
       */
      tableRowClassName({row, rowIndex}) {
        if (row.core === 2) {
          return 'warning-row';
        }
        return '';
      },
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      billPageCurrentChange(value){
        this.pageConfig.current = value
        this.getBillPageList()
      },
      /**
       * 删除提示
       * @param row 当前行数据
       */
      delBillByIdTips(row){
        this.$confirm('是否该删除该账单, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delBill(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 删除账单
       * @param row 当前行数据
       */
      delBill(row){
        http.post("/bill/delBill", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getBillPageList()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置查询条件
       */
      resetQueryBill(){
        this.searchBillParam = {
          purpose: null,
          typeId: null,
          groupId: null,
          triggerTimeStart: null,
          triggerTimeEnd: null,
          priceStart: null,
          priceEnd: 1000000,
          incomeOrExpenditure: null,
          entry: null,
          core: null,
          modeOfExpenditure: null,
          userIdList: null,
          typeIdList: null,
        }
      },
      /**
       * 查询前重置分页参数
       */
      getBillPageListBefore(){
        this.pageConfig.current = 1
        this.getBillPageList()
      },
      /**
       * 分页查询账单
       */
      getBillPageList(){
        this.searchBillParam.current = this.pageConfig.current
        this.searchBillParam.size = this.pageConfig.size

        http.post("/bill/getBillPageList", this.searchBillParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.pageConfig.total = data.total;
          this.pageConfig.current = data.current;
          this.pageConfig.size = data.size;
          // 处理数据
          this.billTableData = data.records

          this.getBillCountList()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 统计根据该查询条件得到的收入和支出结果
       */
      getBillCountList(){
        this.searchBillParam.current = this.pageConfig.current
        this.searchBillParam.size = this.pageConfig.size

        http.post("/bill/getBillCountList", this.searchBillParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          if (data != null){
            this.expense = data.expense
            this.receipt = data.receipt
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取账单类型
       */
      getBillType(){
        http.get("/bill/getBillType", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.billTypeIdList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取 家庭成员
       */
      getMemberFamilyAll(){
        http.get("/user/getMemberFamilyAll", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.memberFamilyList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getBillPageList()
      this.getBillType()
      this.getMemberFamilyAll()
      this.getBillingGroupList()
    }
  }
</script>

<style >

  .el-table .warning-row {
    background: #FAECD8;
  }

</style>
